<template>
  <div class="login-container">
    <div class="box">
      <div
        id="map"
        ref="myEchart"
        :style="{ height: '100%', width: '100%' }"
      />
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
import * as echarts from 'echarts'
const henanJson = require('../assets/henan.json')
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data() {
    return {
      cityData: [
        {
          三门峡: 74589,
          信阳: 9632,
          南阳: 65230,
          周口: 45826,
          商丘: 36596,
          安阳: 36895,
          平顶山: 65210,
          开封: 57826,
          新乡: 101252,
          洛阳: 58624,
          济源: 32506,
          漯河: 96214,
          濮阳: 96325,
          焦作: 63952,
          许昌: 15268,
          郑州: 82300,
          驻马店: 36250,
          鹤壁: 47269
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getList().then((res) => {
      console.log(res)
      this.cityData = res.data[0]
      console.log(this.cityData.安阳)
      this.init(this.cityData)
    })
  },
  mounted() {},
  methods: {
    getList() {
      return request({
        url: '/wlcard/info/cardCount',
        method: 'get'
      })
    },

    init(data) {
      const myChart = echarts.init(document.getElementById('map'))
      echarts.registerMap('henan', henanJson)
      const option = {
        title: {
          // text: "地图",
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: function(params, citys) {
            if (params.name == '安阳市') {
              return '河南<br />' + params.name + '：' + data.安阳 + '张'
            } else if (params.name == '鹤壁市') {
              return '河南<br />' + params.name + data.鹤壁 + '张'
            } else if (params.name == '济源市') {
              return '河南<br />' + params.name + data.济源 + '张'
            } else if (params.name == '焦作市') {
              return '河南<br />' + params.name + data.焦作 + '张'
            } else if (params.name == '开封市') {
              return '河南<br />' + params.name + data.开封 + '张'
            } else if (params.name == '洛阳市') {
              return '河南<br />' + params.name + data.洛阳 + '张'
            } else if (params.name == '漯河市') {
              return '河南<br />' + params.name + data.漯河 + '张'
            } else if (params.name == '南阳市') {
              return '河南<br />' + params.name + data.南阳 + '张'
            } else if (params.name == '平顶山市') {
              return '河南<br />' + params.name + data.平顶山 + '张'
            } else if (params.name == '濮阳市') {
              return '河南<br />' + params.name + data.濮阳 + '张'
            } else if (params.name == '三门峡市') {
              return '河南<br />' + params.name + data.三门峡 + '张'
            } else if (params.name == '商丘市') {
              return '河南<br />' + params.name + data.商丘 + '张'
            } else if (params.name == '新乡市') {
              return '河南<br />' + params.name + data.新乡 + '张'
            } else if (params.name == '信阳市') {
              return '河南<br />' + params.name + data.信阳 + '张'
            } else if (params.name == '许昌市') {
              return '河南<br />' + params.name + data.许昌 + '张'
            } else if (params.name == '郑州市') {
              return '河南<br />' + params.name + data.郑州 + '张'
            } else if (params.name == '周口市') {
              return '河南<br />' + params.name + data.周口 + '张'
            } else {
              return '河南<br />' + params.name + data.驻马店 + '张'
            }
          },
          confine: true
        },
        // visualMap: {
        //   min: 0,
        //   max: 100,
        //   text: ["高", "低"],
        //   realtime: false,
        //   calculable: true,
        //   itemWidth: 10,
        //   itemHeight: 70,
        //   inRange: {
        //     color: ["#121122", "rgba(3,4,5,0.4)", "red"],
        //   },
        // },

        series: [
          {
            name: 'henan',
            type: 'map',
            // zoom: 1.4,
            label: {
              show: false
            },
            mapType: 'henan', // 自定义扩展图表类型

            itemStyle: {
              // normal: {label: {show: true}},

              emphasis: {
                areaColor: '#89b7e5',
                label: { show: true }
              },
              normal: {
                label: {
                  show: true,
                  textStyle: {
                    color: '#444'
                  }
                }
              }
            },
            data: [100, 100, 200, 300, 400, 500, 600, 700, 800]
          }
        ]
      }
      // option.title.text = data.title;
      // option.visualMap.max = data.max;
      // option.series[0].name = data.name;
      option.series[0].data = [100, 100, 200, 300, 400, 500, 600, 700]

      myChart.setOption(option)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    }
  }
}
</script>

<style scoped lang="scss">
#map {
  // margin: auto;
  position: absolute;
  top: 20px;
  left: 0px;
}
</style>
